<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>表单提交与HTML响应示例</title>
  <!-- 引入Tailwind CSS -->
  <script src="https://cdn.tailwindcss.com"></script>
  <!-- 引入Font Awesome -->
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <!-- 引入Vue.js -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
  <!-- 引入Axios -->
  <script src="https://cdn.jsdelivr.net/npm/axios@1.4.0/dist/axios.min.js"></script>
  
  <!-- Tailwind配置 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#165DFF',
            success: '#00B42A',
            danger: '#F53F3F',
            warning: '#FF7D00',
            info: '#86909C'
          },
          fontFamily: {
            inter: ['Inter', 'system-ui', 'sans-serif'],
          },
        },
      }
    }
  </script>
  
  <!-- 自定义工具类 -->
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .card-shadow {
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      }
      .input-focus {
        @apply focus:ring-2 focus:ring-primary/50 focus:border-primary;
      }
      .btn-hover {
        @apply hover:opacity-90 transition-all duration-200;
      }
    }
  </style>
</head>
<body class="bg-gray-50 font-inter min-h-screen">
  <div id="app" class="container mx-auto px-4 py-8 max-w-4xl">
    <!-- 页面标题 -->
    <div class="text-center mb-10">
      <h1 class="text-[clamp(1.8rem,3vw,2.5rem)] font-bold text-gray-800 mb-3">表单提交与HTML响应示例</h1>
      <p class="text-gray-500 max-w-2xl mx-auto">
        这个示例展示如何通过表单提交数据到后端，并显示后端返回的HTML代码。
        输入您的信息并提交，系统将模拟发送请求并展示响应结果。
      </p>
    </div>
    
    <!-- 主要内容区 -->
    <div class="grid grid-cols-1 lg:grid-cols-5 gap-8">
      <!-- 表单区域 -->
      <div class="lg:col-span-2">
        <div class="bg-white rounded-xl p-6 card-shadow">
          <h2 class="text-xl font-semibold text-gray-800 mb-6 flex items-center">
            <i class="fa fa-paper-plane text-primary mr-2"></i>表单提交
          </h2>
          
          <form @submit.prevent="submitForm" class="space-y-5">
            <!-- 姓名 -->
            <div class="space-y-2">
              <label for="name" class="block text-sm font-medium text-gray-700">
                姓名 <span class="text-danger">*</span>
              </label>
              <div class="relative">
                <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-400">
                  <i class="fa fa-user"></i>
                </span>
                <input 
                  type="text" 
                  id="name" 
                  v-model="formData.name" 
                  class="w-full pl-10 pr-4 py-3 rounded-lg border border-gray-300 input-focus transition-all duration-200"
                  placeholder="请输入您的姓名"
                >
              </div>
              <p v-if="errors.name" class="text-sm text-danger mt-1 flex items-center">
                <i class="fa fa-exclamation-circle mr-1"></i> {{ errors.name }}
              </p>
            </div>
            
            <!-- 邮箱 -->
            <div class="space-y-2">
              <label for="email" class="block text-sm font-medium text-gray-700">
                邮箱 <span class="text-danger">*</span>
              </label>
              <div class="relative">
                <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-400">
                  <i class="fa fa-envelope"></i>
                </span>
                <input 
                  type="email" 
                  id="email" 
                  v-model="formData.email" 
                  class="w-full pl-10 pr-4 py-3 rounded-lg border border-gray-300 input-focus transition-all duration-200"
                  placeholder="请输入您的邮箱"
                >
              </div>
              <p v-if="errors.email" class="text-sm text-danger mt-1 flex items-center">
                <i class="fa fa-exclamation-circle mr-1"></i> {{ errors.email }}
              </p>
            </div>
            
            <!-- 留言 -->
            <div class="space-y-2">
              <label for="message" class="block text-sm font-medium text-gray-700">
                留言内容 <span class="text-danger">*</span>
              </label>
              <div class="relative">
                <span class="absolute inset-y-0 left-0 flex items-start pt-3 pl-3 text-gray-400">
                  <i class="fa fa-comment"></i>
                </span>
                <textarea 
                  id="message" 
                  v-model="formData.message" 
                  rows="4" 
                  class="w-full pl-10 pr-4 py-3 rounded-lg border border-gray-300 input-focus transition-all duration-200"
                  placeholder="请输入您的留言内容"
                ></textarea>
              </div>
              <p v-if="errors.message" class="text-sm text-danger mt-1 flex items-center">
                <i class="fa fa-exclamation-circle mr-1"></i> {{ errors.message }}
              </p>
            </div>
            
            <!-- 提交按钮 -->
            <div class="pt-2">
              <button 
                type="submit" 
                class="w-full bg-primary text-white font-medium py-3 px-6 rounded-lg shadow-lg shadow-primary/20 btn-hover flex items-center justify-center"
                :disabled="isSubmitting"
              >
                <span v-if="!isSubmitting">
                  <i class="fa fa-paper-plane mr-2"></i>提交表单
                </span>
                <span v-else class="flex items-center">
                  <i class="fa fa-circle-o-notch fa-spin mr-2"></i>提交中...
                </span>
              </button>
            </div>
          </form>
        </div>
      </div>
      
      <!-- 响应结果区域 -->
      <div class="lg:col-span-3">
        <div class="bg-white rounded-xl p-6 card-shadow">
          <h2 class="text-xl font-semibold text-gray-800 mb-6 flex items-center">
            <i class="fa fa-code text-primary mr-2"></i>后端响应
          </h2>
          
          <!-- 状态指示器 -->
          <div v-if="responseStatus !== null" class="mb-4">
            <div 
              :class="[
                'px-4 py-3 rounded-lg flex items-center',
                responseStatus === 200 ? 'bg-success/10 text-success' : 'bg-danger/10 text-danger'
              ]"
            >
              <i class="fa fa-info-circle mr-2"></i>
              <span>状态码: {{ responseStatus }} - {{ getStatusText(responseStatus) }}</span>
            </div>
          </div>
          
          <!-- 响应内容 -->
          <div class="relative">
            <div class="absolute top-3 right-3">
              <button 
                @click="copyHtmlCode"
                class="text-gray-500 hover:text-primary bg-white rounded-md p-1.5 border border-gray-200 hover:border-primary transition-all duration-200 flex items-center text-sm"
                :disabled="!htmlResponse"
              >
                <i class="fa fa-copy mr-1"></i> 复制
              </button>
            </div>
            
            <div 
              v-if="htmlResponse" 
              class="min-h-[300px] border border-gray-200 rounded-lg overflow-hidden"
            >
              <!-- 原始HTML代码 -->
              <div class="bg-gray-800 text-gray-200 p-4 rounded-t-lg">
                <div class="flex items-center justify-between mb-2">
                  <span class="text-sm font-medium">原始HTML代码</span>
                  <span class="text-xs bg-gray-700 px-2 py-0.5 rounded">
                    {{ htmlResponse.length }} 字符
                  </span>
                </div>
                <pre class="text-xs overflow-x-auto whitespace-pre-wrap max-h-[300px]">
{{ htmlResponse }}
                </pre>
              </div>
              
              <!-- 渲染后的效果 -->
              <div class="p-4 border-t border-gray-200">
                <div class="flex items-center justify-between mb-2">
                  <span class="text-sm font-medium">渲染效果</span>
                  <button 
                    @click="toggleRenderedView"
                    class="text-xs text-primary hover:underline"
                  >
                    {{ renderedView ? '隐藏' : '显示' }}
                  </button>
                </div>
                <div 
                  v-if="renderedView" 
                  class="border border-gray-200 rounded-lg p-4 min-h-[100px]"
                  v-html="htmlResponse"
                ></div>
              </div>
            </div>
            
            <!-- 空状态 -->
            <div v-else class="flex flex-col items-center justify-center py-12 text-gray-400">
              <i class="fa fa-file-code-o text-5xl mb-4"></i>
              <p>暂无HTML响应</p>
              <p class="text-xs mt-2">请提交表单后查看后端返回的HTML代码</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 底部信息 -->
    <div class="mt-12 text-center text-gray-500 text-sm">
      <p>表单提交与HTML响应示例 &copy; 2025 Mr.Pi</p>
    </div>
  </div>

  <script>
    new Vue({
      el: '#app',
      data() {
        return {
          formData: {
            name: '',
            email: '',
            message: ''
          },
          errors: {},
          isSubmitting: false,
          responseStatus: null,
          htmlResponse: '',
          renderedView: true,
          copySuccess: false
        };
      },
      methods: {
        // 表单验证
        validateForm() {
          const errors = {};
          
          // 验证姓名
          if (!this.formData.name.trim()) {
            errors.name = '请输入姓名';
          }
          
          // 验证邮箱
          if (!this.formData.email.trim()) {
            errors.email = '请输入邮箱';
          } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(this.formData.email)) {
            errors.email = '请输入有效的邮箱地址';
          }
          
          // 验证留言
          if (!this.formData.message.trim()) {
            errors.message = '请输入留言内容';
          } else if (this.formData.message.length < 5) {
            errors.message = '留言内容至少需要5个字符';
          }
          
          return errors;
        },
        
        // 提交表单
        async submitForm() {
          // 验证表单
          this.errors = this.validateForm();
          if (Object.keys(this.errors).length > 0) {
            return;
          }
          
          // 重置状态
          this.isSubmitting = true;
          this.responseStatus = null;
          this.htmlResponse = '';
          
          try {
            // 模拟POST请求到后端
            // 注意：实际项目中需要替换为真实的API地址
            const response = await axios.post(
              'http://127.0.0.1:9095/doubaoform/post1',
              this.formData,
              {
                headers: {
                  'Content-Type': 'application/json'
                }
              }
            );
            
            // 模拟后端返回HTML代码
            // 实际项目中，后端会返回真实的HTML字符串
            const mockHtml = `
              <!DOCTYPE html>
              <html>
              <head>
                <meta charset="UTF-8">
                <title>表单提交成功</title>
                <style>
                  body { font-family: Arial, sans-serif; margin: 0; padding: 20px; }
                  .container { max-width: 600px; margin: 0 auto; padding: 20px; border: 1px solid #ddd; border-radius: 5px; }
                  h1 { color: #4CAF50; }
                  .info { margin: 15px 0; padding: 10px; background-color: #f8f9fa; border-left: 4px solid #4CAF50; }
                  .highlight { color: #2196F3; font-weight: bold; }
                </style>
              </head>
              <body>
                <div class="container">
                  <h1>表单提交成功</h1>
                  <p>感谢您的提交，我们已收到您的信息。</p>
                  <div class="info">
                    <p><span class="highlight">姓名:</span> ${this.formData.name}</p>
                    <p><span class="highlight">邮箱:</span> ${this.formData.email}</p>
                    <p><span class="highlight">留言内容:</span> ${this.formData.message}</p>
                    <p><span class="highlight">提交时间:</span> ${new Date().toLocaleString()}</p>
                  </div>
                  <p>我们将尽快与您联系。</p>
                </div>
              </body>
              </html>
            `;
            
            // 保存响应状态和HTML内容
            this.responseStatus = response.status;
            this.htmlResponse = mockHtml;
            
            // 显示成功提示
            this.showNotification('success', '表单提交成功！');
          } catch (error) {
            // 处理错误
            this.responseStatus = error.response?.status || 500;
            this.htmlResponse = `
              <div class="error">
                <h3>请求错误</h3>
                <p>状态码: ${this.responseStatus}</p>
                <p>错误信息: ${error.message}</p>
              </div>
            `;
            
            // 显示错误提示
            this.showNotification('error', '表单提交失败，请重试。');
          } finally {
            this.isSubmitting = false;
          }
        },
        
        // 获取状态文本
        getStatusText(status) {
          const statusTexts = {
            200: 'OK',
            201: 'Created',
            400: 'Bad Request',
            401: 'Unauthorized',
            403: 'Forbidden',
            404: 'Not Found',
            500: 'Internal Server Error'
          };
          return statusTexts[status] || 'Unknown Status';
        },
        
        // 切换渲染视图
        toggleRenderedView() {
          this.renderedView = !this.renderedView;
        },
        
        // 复制HTML代码
        copyHtmlCode() {
          navigator.clipboard.writeText(this.htmlResponse)
            .then(() => {
              this.copySuccess = true;
              setTimeout(() => {
                this.copySuccess = false;
              }, 2000);
            })
            .catch(err => {
              console.error('无法复制文本: ', err);
            });
        },
        
        // 显示通知
        showNotification(type, message) {
          // 这里可以添加通知组件或使用第三方库
          console.log(`${type.toUpperCase()}: ${message}`);
        }
      }
    });
  </script>
</body>
</html>
